<template>
	<div>
			

		<section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="index.html"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
				
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<div>
						<a :href="'/rank'">商品排行榜</a>
					</div>
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
						
						<li class="nav-item dropdown">
							
							<!-- 检索功能 -->
							<Search @search="search" v-model="text"></Search>
							<!-- <div v-width="300">
								 <AutoComplete :option="param" v-model="text" @change="onChange" type="title">
							</AutoComplete></div> -->

						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
					
				</div>
			
			</div>
   
			<!-- 如果没有登陆显示登陆注册 -->
			<div>


				<div v-if="username == ''">

					<router-link to="/login">登录</router-link>
					<router-link to="'/register">注册</router-link>
		
				</div>

				<div v-else>

					{{$t('m.name1')}}:<router-link to="/myprofile">{{username}}</router-link>
					&nbsp;&nbsp;
					<a href="#" @click="exit">{{$t('m.name2')}}</a>
					&nbsp;&nbsp;
					<a href="/addgoods">添加商品</a>

				</div>


			</div>

			<!-- 国际化语言开关 -->
			<h-switch v-model="lang" @change="lang_change">中/English</h-switch>
			
		</nav>
	</section>

	</div>
</template>


<script>

// // 导包
// import jsonp from 'fetch-jsonp';

// const loadData = function (filter, callback) {
//   // this 为 option 配置
//   // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
//   jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
//     .then(response => response.json())
//     .then((d) => {
//       callback(d.result.map((r) => {
//         return r[0];
//       }));
//     });
// };


export default {

  data () {
    return {
	  msg: "这是一个变量",
	  username:'',
	//   检索关键字
	text:"",
	//   语言变量
	lang:true,
	// param: {
    //     orgId: 1, // 自定义参数传递
    //     loadData,
    //     minWord: 1
    //   }
    }
  },
  mounted:function(){


			// 接收参数
			var sina_id = this.$route.query.sina_id;
			var ding_id = this.$route.query.ding_id;

            if(sina_id){

                // 自动登录
                localStorage.setItem('username',sina_id);
                localStorage.setItem('uid',this.$route.query.uid)
			}
			
			if(ding_id){

				localStorage.setItem('username',ding_id);
				localStorage.setItem('uid',this.$route.query.uid);

			}

            //判断用户是否登录
            var uname = localStorage.getItem('username');
            if(uname==null){
                this.username = ""
            }else{
                this.username = uname
			}
			
			// 自动判断
			if(navigator.language == 'zh-CN'){
				this.$i18n.locale = 'cn';
				this.lang = false;
			}else{
				this.$i18n.locale = 'en';
				this.lang = true;
			}

			// 判断语言选择
			// this.$i18n.locale = localStorage.getItem('lang');
			// if(this.$i18n.locale=='cn'){
			// 	this.lang = 0;
			// }else{
			// 	this.lang = 1;
			// }
  
},
  methods:{
	//   检索逻辑
	search:function(){

		console.log(this.text);
		// 跳转
		this.$router.push({'path':'/search',query:{word:this.text}})
		location.reload();

	},

	// onChange(data, trigger) {
	// 	console.log(data, trigger);
	// 	this.$router.push({'path':'/search',query:{word:this.text}})
	// 	location.reload();
    // },

	//   语言切换时间
	lang_change:function(){
		console.log(this.lang);

		// 判断语言
		if(this.lang == true){
			// 语言
			this.$i18n.locale = "en";
			localStorage.setItem('lang','en');
		}else{
			// 单选
			this.$i18n.locale = "cn";
			localStorage.setItem('lang','cn');

		}
	},

	  exit:function(){
		//   删除localstrong
		localStorage.removeItem("username")
		localStorage.removeItem('uid')

		// 跳转
		this.$router.push('/Login')
	  }
     
  }
}
	


</script>


<style>
	


</style>